<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输入框中的内容，然后验证其是否合法
        验证的规则是：必须由字母、数字、下划线组成。并且长度是5~12位。
         */
        function onclickFun() {
            //当我们要获取一个标签的时候，一定要先获取这个标签对象
            var passwordObj = document.getElementById("password");
            //alert(passwordObj);//[object HTMLInputElement] 这就是dom对象
            //alert(passwordObj.id);//password
            //alert(passwordObj.type);//text
            //alert(passwordObj.value);//获取输入框值
            var passwordText = passwordObj.value;
            //验证字符串，使用正则表达式进行验证
            var pattern = /^\w{5,12}$/;

            var passwordSpanObj = document.getElementById("passwordSpan");
            //innerHTML：表示起始标签和结束标签中的内容，可以进行读取和插入内容
            //alert(passwordSpanObj.innerHTML);
            /*
            test()方法用于测试某个字符串，是不是匹配该规则
            匹配返回true，不匹配返回false
             */
            if (pattern.test(passwordText)) {
                //alert("密码合法");
                //passwordSpanObj.innerHTML = "密码合法";
                passwordSpanObj.innerHTML = "<img src=\"right.png\" width=\"18px\" height=\"18px\">";
            } else {
                //alert("密码不合法");
                //passwordSpanObj.innerHTML = "密码不合法";
                passwordSpanObj.innerHTML = '<img src="wrong.png" width="18px" height="18px">';
            }
        }
    </script>
</head>
<body>
    密码：<input id="password" type="text" value="" />
    <span id="passwordSpan" style="color: red;">

    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>